{% extends '@WebsiteBundle/layout/baselayout.html.twig' %}
{% block seo_title %}
	{{ seoTitle }}
{% endblock %}
{% block seo_descr %}
	{{ seoDescr }}
{% endblock %}
{% block seo_kw %}
	{{ seoKw }}
{% endblock %}

{% block head_stylesheets %}
	{{ parent() }}
	{{ encore_entry_link_tags('website_news') }}
{% endblock %}

{% block head_javascript %}
	{{ parent() }}
{% endblock %}

{% block body_javascript %}
	{{ parent() }}
	{{ encore_entry_script_tags('website_news') }}
{% endblock %}

{% block body_main %}
	{{ parent() }}
	<div class="page">
		{{ render(path('app_header', {"route":route})) }}
		<div class="page-wrapper">
			<div class="page-body">
				<div class="container-xl">
					<div class="row row-cards">
						<div class="col-sm-12 col-lg-1 text-center">
							<div class="sticky-left">
								<div class="btn-group-vertical">
									<a href="{{ path('app_news_doFav', {'id':detail['id']}) }}" class="btn w-100" id="fav">
										{% if fav %}
											<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-filled" width="24" height="24" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
												<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
												<path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" stroke-width="0" fill="currentColor"></path>
											</svg>
										{% else %}
											<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
												<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
												<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
											</svg>
										{% endif %}
										<span id="favNum">{{ detail['favNumber'] }}</span>
									</a>
								</div>
							</div>
						</div>
						<div class="col-sm-12 col-lg-9">
							<div class="card card-sm p-2">
								<div class="card-header p-3">
									<div class="row align-items-center">
										<h1 class="col-sm-12 col-lg-12 h1 p-2 tracking-wide text-muted">{{ detail['title'] }}</h1>
										<div class="col-sm-12 col-lg-9 ">
											<ul class="breadcrumb">
												<li class="breadcrumb-item text-muted">
													<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
														<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
														<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
														<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"></path>
													</svg>
													{{ detail['viewNumber'] }}
												</li>
												<li class="breadcrumb-item  text-muted">创建于{{ detail['createdAtTime'] |qtime}}</li>
												<li class="breadcrumb-item text-muted">更新于{{ detail['updatedAtTime'] |qtime}}</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="card-body p-0">
									<div class="row align-items-center">
										<div class="col-12 py-4">
											<div class="h-100 vditor-reset pb-2" id="preview">{{ detail['main']['content']|markdown_to_html }}</div>
										</div>
										<div class="col-lg-12 d-none d-md-block social-share" data-disabled="google,qzone,douban,tencent,linkedin,diandian"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-2 d-none d-md-block p-2">
							<div class="sticky-top" id="outline"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	{{ render(path('app_footer')) }}
</div>{% endblock %}
